<template>
  <div class="container">
    <h1>{{ t("艺术系列") }}</h1>
    <div class="banner">
      <div class="left">
        <!-- 商品信息 -->
        <h2>{{ t("产品型号") }}:</h2>
        <h3 style="margin-top: 20px">
          {{ obj.goods_model_res?.pid_name + obj.goods_model_res?.name }}
        </h3>
        <!-- 选择地址 -->
        <div class="address">
          <p>{{ $t("购物车.配送至") }}:</p>
          <div class="address-div" @click="addressClick()">
            <span>{{
              currentAddress
                ? currentAddress.country +
                  currentAddress.province +
                  currentAddress.city +
                  currentAddress.district
                : ""
            }}</span>
            <img src="../../assets/images/home/right.png" alt="" />
          </div>
        </div>
        <!-- 支付方式 -->
        <div class="shopping">
          <button @click="pay">{{ t("立即下单") }}</button>

          <div class="pay">
            <ul>
              <li>
                <img src="../../assets/images/home/zfb.png" alt="" />
              </li>
              <li>
                <img src="../../assets/images/home/wx.png" alt="" />
              </li>
              <li>
                <img src="../../assets/images/home/pp.png" alt="" />
              </li>
              <li>
                <img src="../../assets/images/home/yhk.png" alt="" />
              </li>
            </ul>
            <p>{{ t("支付的付款方式") }}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <img :src="obj.image | imgSrc" alt="" />
      </div>
    </div>
    <el-dialog
      :title="t('选择地址')"
      :visible.sync="addressDialog.show"
      width="70%"
    >
      <template v-if="addressDialog.action == 'select'">
        <addressSelect @select="addressSelect($event)"></addressSelect>
      </template>
      <template v-if="addressDialog.action == 'add'">
        <addressEidt @editAddress="addAddress($event)"></addressEidt>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { artgoodsdetail, getAddressList, createartorder } from "@/utils/api";
import addressSelect from "@/components/addressSelect.vue";
import { Message } from "element-ui";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    addressSelect,
  },
  data() {
    //这里存放数据
    return {
      addressDialog: {
        show: false,
        action: null,
      }, // 控制谈款的显示
      obj: {},
      addresslist: [],
      currentAddress: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取商品详情
    this.getGoodsDetail();
    // 获取地址列表
    this.gteaddreslist();
  },
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`详情页.${v}`);
    },
    // 获取详情
    getGoodsDetail() {
      artgoodsdetail({
        user_works_id: this.$route.query.goods_id,
      }).then((res) => {
        if (res.code == 1) {
          console.log("商品详情----------", res.data);
          this.obj = res.data;
        }
      });
    },
    //  获取地址列表
    gteaddreslist() {
      getAddressList().then((res) => {
        console.log(res.data);
      });
    },
    // 点击弹框显示
    addressClick() {
      // this.$router.push({ path: "/accountInfo/address", query: { aside: 1 } });
      this.addressDialog = {
        show: true,
        action: "select",
      };
    },
    // 子向父传值
    addressSelect(e) {
      console.log("地址的id", e);
      this.currentAddress = e;
      this.addressDialog = { show: false };
    },
    //立即支付
    pay() {
      if (!this.currentAddress) {
        return Message({
          message: "请选择配送地址",
          duration: 2000,
          type: "warning",
        });
      }
      createartorder({
        address_id: this.currentAddress.id,
        coupon_id: "",
        user_works_id: this.obj.id,
        number: "1",
      }).then((res) => {
        console.log("创建订单返回的结果", res);
        if (res.code == 1) {
          this.$router.push("order");
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.container {
  h1 {
    padding: 30px 100px;
  }
  .banner {
    box-sizing: border-box;
    width: 1700px;
    display: flex;
    padding: 0px 100px;
    justify-content: center;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 200px;
      .shopping {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // flex-flow: row wrap;

        button {
          width: 420px;
          height: 60px;
          background: #ff5757;
          border-radius: 39px;
          text-align: center;
          line-height: 60px;
          border: 0;
          color: #fff;
          margin: 20px 0 10px;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
        }

        .pay {
          ul {
            width: 400px;
            display: flex;
            justify-content: space-between;

            li {
              width: 90px;

              img {
                width: 100%;
              }
            }
          }

          p {
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
    .right {
      box-sizing: border-box;
      width: 300px;
      height: 600px;
      margin-left: 200px;
    }
  }
  .address {
    display: flex;
    align-items: center;
    margin-top: 100px;
    p {
      font-size: 16px;
      font-weight: 400;
      color: #000000;
      margin-right: 10px;
    }

    .address-div {
      box-sizing: border-box;
      width: 200px;
      height: 45px;
      padding: 14px 12px;
      background: #f9f9f9;
      border-radius: 5px;

      display: flex;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;

      span {
        font-size: 16px;
        font-weight: 400;
        color: #666666;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
